<!-- 上传视频 -->
<template>
    <component
    is="a-modal"
    v-model:visible="visible"
    :width="800"
    :title="title"
    :mask-closable="false"
    :ok-loading="loading"
    @cancel="close">
        <a-alert type="warning" :closable="false" show-icon class="mb-2">
            <template #title>
                1. 选择视频文件后自动上传，上传过程中请不要关闭窗口！<br />
                2. 上传完成可以选择再次上传，也可以在视频库查看！<br />
                3. 支持上传rmvb、mp4、avi、wmv、mkv、flv、mp3、wav、mov格式！<br />
            </template>
        </a-alert>

        <iframe
            width="100%"
            height="60px"
            ref="iframeDom"
            src="/static/uoloadVideo.html"
            @load="onLoad"
        ></iframe>
        <div class="mask-btn">
            <a-button v-if="loading" :loading="loading" type="primary">上传视频</a-button>
            <span v-if="readLoading">视频准备中，请稍等...</span>
        </div>

        <a-progress
            v-if="percent > 0 || loading"
            type="circle"
            :percentage="percent"
            :status="percent === 100 ? 'success' : ''"
            :color="colors"
        >
            <a-button v-if="percent === 100" type="primary"  circle> </a-button>
        </a-progress>
    </component>
</template>
<script setup lang="ts">
import { Message } from '@arco-design/web-vue'
import { onMounted, onUnmounted, reactive, ref, toRaw } from 'vue'
import API_LIVE from '@/api/live/live'
import { s } from 'vite/dist/node/types.d-aGj9QkWt'

const emit = defineEmits(['success', 'close'])

const queryParams = reactive({
    lottery_id: 0,
    room_id: 0
})
const visible = ref(false)
const title = ref('上传视频')

const open = () => {
    visible.value = true
   
}

const close = () => {
    visible.value = false
    loading.value = false
    percent.value = 0
}
const loading = ref(false)

const setFormData = (room_id?: number, lottery_id?: number) => {
    queryParams.room_id = room_id ?? 0
    queryParams.lottery_id = lottery_id ?? 0
}

/**
 * @description: 视频库上传
 */

const percent = ref(0)

const colors = [
    { color: '#f56c6c', percentage: 20 },
    { color: '#e6a23c', percentage: 40 },
    { color: '#6f7ad3', percentage: 60 },
    { color: '#1989fa', percentage: 80 },
    { color: '#5cb87a', percentage: 100 }
]

const params = reactive({
    token: '',
    app_key: '',
    demandType: undefined
})

const iframeDom = ref<HTMLIFrameElement>()
async function onLoad() {
    const res = await API_LIVE.getVideoToken()
    params.token = res.data.token ?? ''
    params.app_key = res.data.app_key ?? ''
    params.demandType = res.data.demandType ?? undefined
    const iframeWindow = iframeDom.value?.contentWindow
    setTimeout(() => {
        iframeWindow?.postMessage(toRaw(params), '*')
    }, 100)
}
// 监听上传进度
const readLoading = ref(false)
const getEvent = (event: any) => {
    console.log('上传进度', event)
    if (event.data.status === 'ready') {
        loading.value = true
        readLoading.value = true
        // feedback.msg('视频准备中，请稍等...')
    }

    if (event.data.status == 'progress') {
        // feedback.closeLoading()
        readLoading.value = false
        percent.value = parseFloat(event.data.percent)
    }
    if (event.data.status == 'error') {
        loading.value = false
        readLoading.value = false
        Message.error('视频上传失败！')
        console.log('上传失败', event.data.msg)
    }
    if (event.data.status == 'success') {
        loading.value = false
        Message.success('视频上传成功！')
        emit('success')
        setTimeout(() => {
            close()
        }, 1000)
        // console.log('上传成功', event.data.status)
    }
}
onMounted(() => {
    console.log('上传视频')
    window.addEventListener('message', getEvent)
})

onUnmounted(() => {
    window.removeEventListener('message', getEvent)
})
defineExpose({
    open,
    setFormData
})
</script>
<style lang="less">
.mask-btn {
    transform: translateY(-56px);
}
</style>
